﻿@{
    Layout = "~/Views/Shared/_LayuiLayout.cshtml";
}
@model UserOutput
<form class="layui-form layui-form-pane">
    @Html.AntiForgeryToken()
    <input type="hidden" value="@Model.Id" name="Id" />
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" autocomplete="off" placeholder="请输入用户名" class="layui-input"
                   lay-verify="required" name="UserName" value="@Model.UserName" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" autocomplete="off" placeholder="请输入真实姓名" class="layui-input"
                   lay-verify="required" name="RealName" value="@Model.RealName" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <div class="layui-input">
                <input name="Sex" value="1" title="男" type="radio" @(Model.Sex == "1" ? "checked" : "") />
                <input name="Sex" value="2" title="女" type="radio" @(Model.Sex == "2" ? "checked" : "") />
            </div>
        </div>
    </div>
    @if (Model.Id <= 0)
    {
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" class="layui-input" lay-verify="pass" name="UserPWD" value="888888" />
            </div>
        </div>
    }
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="tel" autocomplete="off" placeholder="请输入电话号码" class="layui-input"
                   lay-verify="" name="Tel" value="@Model.Tel" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
            <input type="tel" autocomplete="off" placeholder="请输入手机号码" class="layui-input"
                   lay-verify="" name="Phone" value="@Model.Phone" />
        </div>
    </div>
    <div style="width:25%; float: left; margin:20px 0 0 5%; text-align: center;">
        <input type="hidden" value="@Model.UserPhoto" name="UserPhoto" id="UserPhoto" />
        <button type="button" class="layui-btn layui-btn-normal" id="btnImg">上传头像</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" src="@(Model.UserPhoto!=null&&Model.UserPhoto!=""?Model.UserPhoto:"/Content/layuicms2.0-master/images/head.png")" id="PicView" style="height:400px;width:400px;border:1px solid #EEEEEE;" alt="头像">
        </div>
    </div>
    <div class="layui-form-item" align="center">
        <button class="layui-btn" lay-submit="" lay-filter="btnSave">保存</button>
        <button id="show" type="button" class="layui-btn layui-btn-primary" onclick="javascript:layer_close();">关闭</button>
    </div>
</form>

@section scripts{
    <script>
        layui.use(['form', 'layer', 'upload'], function () {
            var form = layui.form,
                upload = layui.upload,
                $ = layui.$;
            layer = parent.layer === undefined ? layui.layer : parent.layer;

            if (@ViewBag.tag==1){
                $("#show").hide();
            }
            // 最大允许上传的单个文件大小(kb)
            var sizeMax = 1024*5;
            var uploadIns = upload.render(
                {
                    elem: '#btnImg',
                    method: 'post',
                    url: '@Url.Action("UpLoadUserHeadPic", "File")',
                    accept: 'images',
                    exts: 'jpg|png|gif|bmp|jpeg',
                    size: sizeMax,
                    before: function (obj) {
                        obj.preview(function (index, file, result) {
                            $('#PicView').attr('src', result); //图片链接（base64）
                        });
                    },
                    done: function (res, index, upload) {
                        if (res.code == 0) {   // 上传成功
                            layer.msg('头像上传成功', { icon: 1, time: 2000 });
                            $('#UserPhoto').val(res.data[0].src);
                        } else {
                            layer.alert(res.msg, { icon: 2 });
                        }
                    },
                    error: function (index, upload) {
                        layer.msg('上传失败！', { icon: 2, time: 1000 });
                    }
                });

            //自定义验证规则
            form.verify({
                pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });

            //监听提交
            form.on('submit(btnSave)', function (data) {
                //验证性别
                if (!data.field.Sex) {
                    layer.msg('请选择性别', { icon: 2, time: 2000 });
                    return false;
                }

                $.post('@Url.Action("AddOrEdit", "User")', data.field, function (msg) {
                    if (msg.Success) {
                        parent.layer.msg(msg.Message, { icon: 1, time: 2000 });
                        layer_close();
                        parent.reload();
                    } else {
                        layer.alert(msg.Message, { icon: 2 });
                    }
                });
                return false;
            });
        });
    </script>
}